<template>
  <div class="environment-monitor">
    <!-- 顶部控制面板 -->
    <div class="control-panel">
      <div class="group-select">
        <span>选择分组:</span>
        <el-select
          v-model="selectedGroupId"
          placeholder="请选择分组"
          @change="onGroupChange"
          style="width: 250px"
        >
          <el-option
            v-for="group in groupData"
            :key="group.id"
            :label="group.name"
            :value="group.id"
          >
          </el-option>
        </el-select>
      </div>
      <div class="refresh-btn">
        <el-button @click="fetchHistoricalData">
          <i class="el-icon-refresh"></i> 刷新数据
        </el-button>
      </div>
    </div>

    <!-- 分组卡片 -->
    <div v-if="selectedGroupId" class="group-card">
      <!-- 历史数据图表 -->
      <div class="chart-container">
        <div class="chart-header">
          <h3>环境数据趋势</h3>
        </div>
        <div class="chart-wrapper">
          <canvas
            v-if="historicalData[selectedGroupId]"
            :id="'chart-' + selectedGroupId"
            :width="chartWidth"
            :height="chartHeight"
          ></canvas>
          <div v-else class="empty-chart">暂无历史数据</div>
        </div>
      </div>

      <!-- 数据分析 -->
      <div class="analysis-container">
        <h3>数据分析</h3>
        <div class="analysis-row temperature-row">
          <div class="analysis-item">
            <div class="analysis-label">平均温度</div>
            <div class="analysis-value">{{ getAnalysisData('tempAvg') }}</div>
          </div>
          <div class="analysis-item">
            <div class="analysis-label">最高温度</div>
            <div class="analysis-value">{{ getAnalysisData('tempMax') }}</div>
          </div>
          <div class="analysis-item">
            <div class="analysis-label">最低温度</div>
            <div class="analysis-value">{{ getAnalysisData('tempMin') }}</div>
          </div>
          <div class="analysis-item">
            <div class="analysis-label">温度趋势</div>
            <div class="analysis-value">{{ getAnalysisData('tempTrend') }}</div>
          </div>
        </div>
        <div class="analysis-row humidity-row">
          <div class="analysis-item">
            <div class="analysis-label">平均湿度</div>
            <div class="analysis-value">{{ getAnalysisData('humidityAvg') }}</div>
          </div>
          <div class="analysis-item">
            <div class="analysis-label">最高湿度</div>
            <div class="analysis-value">{{ getAnalysisData('humidityMax') }}</div>
          </div>
          <div class="analysis-item">
            <div class="analysis-label">最低湿度</div>
            <div class="analysis-value">{{ getAnalysisData('humidityMin') }}</div>
          </div>
          <div class="analysis-item">
            <div class="analysis-label">湿度趋势</div>
            <div class="analysis-value">{{ getAnalysisData('humidityTrend') }}</div>
          </div>
        </div>
        <div class="analysis-row pm25-row">
          <div class="analysis-item">
            <div class="analysis-label">平均PM2.5值</div>
            <div class="analysis-value">{{ getAnalysisData('pm25Avg') }}</div>
          </div>
          <div class="analysis-item">
            <div class="analysis-label">最低PM2.5值</div>
            <div class="analysis-value">{{ getAnalysisData('pm25Min') }}</div>
          </div>
          <div class="analysis-item">
            <div class="analysis-label">最高PM2.5值</div>
            <div class="analysis-value">{{ getAnalysisData('pm25Max') }}</div>
          </div>
          <div class="analysis-item">
            <div class="analysis-label">空气质量评级</div>
            <div class="analysis-value">{{ getAnalysisData('airQuality') }}</div>
          </div>
        </div>
        <div class="analysis-row comfort-row">
          <div class="analysis-item">
            <div class="analysis-label">综合舒适度</div>
            <div class="analysis-value">{{ getAnalysisData('comfort') }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EnvironmentMonitor',
  data() {
    return {
      // 分组数据配置
      groupData: [
        {
          id: 'production-line-1',
          name: '默认分组'
        },
        {
          id: 'production-line-2',
          name: '办公室设备'
        }
      ],
      // 历史数据
      historicalData: {},
      // 图表尺寸
      chartWidth: 360,
      chartHeight: 200,
      // 图表类型选择（已移除）
      // 分析数据
      analysisData: {},
      // 空气质量状态映射
      airQualityScore: {
        优: 5,
        良好: 4,
        一般: 3,
        差: 2,
        很差: 1
      },
      // PM2.5评级映射
      pm25Grade: {
        0: '优',
        1: '优',
        2: '优',
        3: '优',
        4: '优',
        5: '优',
        6: '良',
        7: '良',
        8: '良',
        9: '良',
        10: '良',
        11: '良',
        12: '良',
        13: '轻度污染',
        14: '轻度污染',
        15: '轻度污染',
        16: '轻度污染',
        17: '轻度污染',
        18: '轻度污染',
        19: '轻度污染',
        20: '中度污染',
        21: '中度污染',
        22: '中度污染',
        23: '中度污染',
        24: '中度污染',
        25: '重度污染',
        26: '重度污染',
        27: '重度污染',
        28: '严重污染',
        29: '严重污染'
      },
      // 图表颜色配置
      chartColors: {
        temperature: {
          border: 'rgba(64, 158, 255, 1)',
          fill: 'rgba(64, 158, 255, 0.1)'
        },
        humidity: {
          border: 'rgba(103, 194, 58, 1)',
          fill: 'rgba(103, 194, 58, 0.1)'
        },
        pm25: {
          border: 'rgba(230, 162, 60, 1)',
          fill: 'rgba(230, 162, 60, 0.1)'
        }
      },
      // 选中的分组ID
      selectedGroupId: null
    }
  },
  mounted() {
    if (this.groupData.length > 0) {
      this.selectedGroupId = this.groupData[0].id
      this.fetchHistoricalData()
    }
    // 监听窗口大小变化，重绘图表
    window.addEventListener('resize', this.redrawAllCharts)
  },
  beforeDestroy() {
    // 移除事件监听
    window.removeEventListener('resize', this.redrawAllCharts)
  },
  methods: {
    // 获取选中分组的名称
    getSelectedGroupName() {
      return this.groupData.find((group) => group.id === this.selectedGroupId)?.name || ''
    },
    // 获取选中分组的描述
    getSelectedGroupDesc() {
      return this.groupData.find((group) => group.id === this.selectedGroupId)?.description || ''
    },
    // 获取选中分组的分析数据
    getAnalysisData(key) {
      return this.analysisData[this.selectedGroupId]?.[key]?.value || ''
    },
    // 分组变更处理
    onGroupChange() {
      this.fetchHistoricalData()
    },
    // 获取历史数据（模拟）
    fetchHistoricalData() {
      if (!this.selectedGroupId) return
      // 模拟从API获取历史数据
      const historicalData = this.generateHistoricalData(this.selectedGroupId)
      this.historicalData[this.selectedGroupId] = historicalData
      this.generateAnalysisData(this.selectedGroupId, historicalData)
      this.$nextTick(() => {
        this.drawChart(this.selectedGroupId, historicalData)
      })
    },
    // 生成模拟历史数据
    generateHistoricalData(groupId) {
      const now = new Date()
      const days = 7 // 固定显示7天数据

      const data = {
        labels: [],
        temperature: [],
        humidity: [],
        pm25: []
      }

      // 为不同分组设置不同的基准值
      const groupBaseValues = {
        'production-line-1': { temp: 28, humidity: 40, pm25: 25 },
        'production-line-2': { temp: 26, humidity: 45, pm25: 18 }
      }

      const baseValues = groupBaseValues[groupId] || { temp: 25, humidity: 50, pm25: 20 }

      // 生成过去7天的数据
      for (let i = days - 1; i >= 0; i--) {
        const date = new Date(now)
        date.setDate(date.getDate() - i)
        data.labels.push(`${date.getMonth() + 1}/${date.getDate()}`)

        // 添加随机波动
        const temp = baseValues.temp + (Math.random() * 4 - 2)
        const humidity = Math.min(100, Math.max(30, baseValues.humidity + (Math.random() * 10 - 5)))
        const pm25 = Math.max(0, Math.min(300, baseValues.pm25 + (Math.random() * 20 - 10)))

        data.temperature.push(temp)
        data.humidity.push(humidity)
        data.pm25.push(pm25)
      }

      // 计算数据范围
      const tempMin = Math.min(...data.temperature)
      const tempMax = Math.max(...data.temperature)
      const humidityMin = Math.min(...data.humidity)
      const humidityMax = Math.max(...data.humidity)
      const pm25Min = Math.min(...data.pm25)
      const pm25Max = Math.max(...data.pm25)

      return {
        data,
        ranges: {
          temperature: { min: Math.floor(tempMin), max: Math.ceil(tempMax) },
          humidity: { min: Math.floor(humidityMin), max: Math.ceil(humidityMax) },
          pm25: { min: Math.floor(pm25Min), max: Math.ceil(pm25Max) }
        }
      }
    },
    // 绘制图表（纯Canvas实现）
    drawChart(groupId, historicalData) {
      const canvas = document.getElementById(`chart-${groupId}`)
      if (!canvas) return

      const ctx = canvas.getContext('2d')
      const { data, ranges } = historicalData
      const { temperature, humidity, pm25, labels } = data
      const numPoints = labels.length

      // 清除画布
      ctx.clearRect(0, 0, canvas.width, canvas.height)

      // 设置边距
      const margin = { top: 20, right: 40, bottom: 30, left: 40 }
      const chartWidth = canvas.width - margin.left - margin.right
      const chartHeight = canvas.height - margin.top - margin.bottom

      // 计算数据点间距
      const xStep = chartWidth / (numPoints - 1)

      // 绘制网格和坐标轴
      this.drawGrid(ctx, margin, chartWidth, chartHeight, ranges, labels)

      // 绘制温度曲线
      this.drawLine(
        ctx,
        temperature,
        ranges.temperature,
        margin,
        chartWidth,
        chartHeight,
        xStep,
        this.chartColors.temperature
      )

      // 绘制湿度曲线
      this.drawLine(
        ctx,
        humidity,
        ranges.humidity,
        margin,
        chartWidth,
        chartHeight,
        xStep,
        this.chartColors.humidity
      )

      // 绘制PM2.5曲线（右侧Y轴）
      this.drawLine(
        ctx,
        pm25,
        ranges.pm25,
        margin,
        chartWidth,
        chartHeight,
        xStep,
        this.chartColors.pm25,
        true
      )

      // 绘制图例
      this.drawLegend(ctx, margin, chartWidth)
    },
    // 绘制网格和坐标轴
    drawGrid(ctx, margin, chartWidth, chartHeight, ranges, labels) {
      ctx.save()
      ctx.translate(margin.left, margin.top)

      // 绘制X轴
      ctx.beginPath()
      ctx.moveTo(0, chartHeight)
      ctx.lineTo(chartWidth, chartHeight)
      ctx.strokeStyle = '#e0e0e0'
      ctx.lineWidth = 1
      ctx.stroke()

      // 绘制Y轴
      ctx.beginPath()
      ctx.moveTo(0, 0)
      ctx.moveTo(0, chartHeight)
      ctx.lineTo(0, 0)
      ctx.stroke()

      // 绘制Y轴刻度和标签（左侧 - 温度/湿度）
      const yTicks = 5
      for (let i = 0; i <= yTicks; i++) {
        const y = chartHeight - (i * chartHeight) / yTicks

        // 绘制水平网格线
        ctx.beginPath()
        ctx.moveTo(0, y)
        ctx.lineTo(chartWidth, y)
        ctx.strokeStyle = '#f0f0f0'
        ctx.lineWidth = 1
        ctx.stroke()

        // 绘制Y轴刻度
        ctx.beginPath()
        ctx.moveTo(-5, y)
        ctx.lineTo(0, y)
        ctx.strokeStyle = '#e0e0e0'
        ctx.stroke()

        // 计算刻度值（温度范围）
        const tempRange = ranges.temperature.max - ranges.temperature.min
        const tempValue = ranges.temperature.min + (tempRange * (yTicks - i)) / yTicks

        // 绘制温度刻度标签
        ctx.fillStyle = '#333'
        ctx.font = '10px Arial'
        ctx.textAlign = 'right'
        ctx.textBaseline = 'middle'
        ctx.fillText(tempValue.toFixed(0) + '°C', -10, y)

        // 计算刻度值（湿度范围）
        const humidityRange = ranges.humidity.max - ranges.humidity.min
        const humidityValue = ranges.humidity.min + (humidityRange * (yTicks - i)) / yTicks

        // 绘制湿度刻度标签（在右侧）
        ctx.textAlign = 'left'
        ctx.fillText(humidityValue.toFixed(0) + '%', chartWidth + 10, y)
      }

      // 绘制Y轴（右侧 - PM2.5）
      ctx.beginPath()
      ctx.moveTo(chartWidth, chartHeight)
      ctx.lineTo(chartWidth, 0)
      ctx.stroke()

      // 绘制PM2.5 Y轴刻度和标签
      for (let i = 0; i <= yTicks; i++) {
        const y = chartHeight - (i * chartHeight) / yTicks

        // 绘制Y轴刻度
        ctx.beginPath()
        ctx.moveTo(chartWidth, y)
        ctx.lineTo(chartWidth + 5, y)
        ctx.stroke()

        // 计算刻度值（PM2.5范围）
        const pm25Range = ranges.pm25.max - ranges.pm25.min
        const pm25Value = ranges.pm25.min + (pm25Range * (yTicks - i)) / yTicks

        // 绘制PM2.5刻度标签
        ctx.fillStyle = '#333'
        ctx.textAlign = 'left'
        ctx.fillText(pm25Value.toFixed(0), chartWidth + 10, y)
      }

      // 绘制X轴刻度和标签
      const xTicks = Math.min(7, labels.length) // 最多显示7个刻度
      const xTickStep = Math.max(1, Math.floor(labels.length / xTicks))

      for (let i = 0; i < labels.length; i += xTickStep) {
        const x = i * (chartWidth / (labels.length - 1))

        // 绘制垂直网格线
        ctx.beginPath()
        ctx.moveTo(x, 0)
        ctx.lineTo(x, chartHeight)
        ctx.strokeStyle = '#f0f0f0'
        ctx.stroke()

        // 绘制X轴刻度
        ctx.beginPath()
        ctx.moveTo(x, chartHeight)
        ctx.lineTo(x, chartHeight + 5)
        ctx.strokeStyle = '#e0e0e0'
        ctx.stroke()

        // 绘制X轴标签
        ctx.fillStyle = '#333'
        ctx.textAlign = 'center'
        ctx.textBaseline = 'top'
        ctx.fillText(labels[i], x, chartHeight + 10)
      }

      ctx.restore()
    },
    // 绘制曲线
    drawLine(ctx, data, range, margin, chartWidth, chartHeight, xStep, color, isRightAxis = false) {
      ctx.save()
      ctx.translate(margin.left, margin.top)

      const rangeMin = range.min
      const rangeMax = range.max
      const rangeDiff = rangeMax - rangeMin

      // 计算Y轴位置转换函数
      const yPos = (value) => {
        const normalized = (value - rangeMin) / rangeDiff
        return chartHeight - normalized * chartHeight
      }

      // 绘制曲线
      ctx.beginPath()
      ctx.moveTo(0, yPos(data[0]))

      for (let i = 1; i < data.length; i++) {
        const x = i * xStep
        const y = yPos(data[i])
        ctx.lineTo(x, y)
      }

      ctx.strokeStyle = color.border
      ctx.lineWidth = 2
      ctx.stroke()

      // 绘制填充区域
      ctx.beginPath()
      ctx.moveTo(0, yPos(data[0]))

      for (let i = 1; i < data.length; i++) {
        const x = i * xStep
        const y = yPos(data[i])
        ctx.lineTo(x, y)
      }

      // 闭合路径到图表底部
      ctx.lineTo(chartWidth, chartHeight)
      ctx.lineTo(0, chartHeight)
      ctx.closePath()

      ctx.fillStyle = color.fill
      ctx.fill()

      ctx.restore()
    },
    // 绘制图例
    drawLegend(ctx, margin, chartWidth) {
      ctx.save()
      ctx.translate(margin.left, margin.top)

      const legendItems = [
        { label: '温度', color: this.chartColors.temperature.border },
        { label: '湿度', color: this.chartColors.humidity.border },
        { label: 'PM2.5', color: this.chartColors.pm25.border }
      ]

      const legendHeight = 20
      const legendWidth = 80
      const legendSpacing = 10

      legendItems.forEach((item, index) => {
        const x =
          chartWidth -
          legendItems.length * (legendWidth + legendSpacing) +
          index * (legendWidth + legendSpacing)
        const y = -margin.top + 10

        // 绘制颜色标记
        ctx.fillStyle = item.color
        ctx.fillRect(x, y, 10, 10)

        // 绘制文本
        ctx.fillStyle = '#333'
        ctx.font = '10px Arial'
        ctx.textAlign = 'left'
        ctx.textBaseline = 'top'
        ctx.fillText(item.label, x + 15, y)
      })

      ctx.restore()
    },
    // 重绘所有图表
    redrawAllCharts() {
      if (this.selectedGroupId && this.historicalData[this.selectedGroupId]) {
        this.drawChart(this.selectedGroupId, this.historicalData[this.selectedGroupId])
      }
    },
    // 更新图表类型（已移除相关功能）
    // updateChartType() {
    //   this.fetchHistoricalData()
    // },
    // 生成分析数据
    generateAnalysisData(groupId, historicalData) {
      const { temperature, humidity, pm25 } = historicalData.data

      // 计算温度分析
      const tempAvg = temperature.reduce((a, b) => a + b, 0) / temperature.length
      const tempMax = Math.max(...temperature)
      const tempMin = Math.min(...temperature)
      const tempTrend = this.calculateTrend(temperature)

      // 计算湿度分析
      const humidityAvg = humidity.reduce((a, b) => a + b, 0) / humidity.length
      const humidityMax = Math.max(...humidity)
      const humidityMin = Math.min(...humidity)
      const humidityTrend = this.calculateTrend(humidity)

      // 计算PM2.5分析
      const pm25Avg = pm25.reduce((a, b) => a + b, 0) / pm25.length
      const pm25Max = Math.max(...pm25)
      const pm25Min = Math.min(...pm25)
      const airQualityStatus = this.getAirQualityStatus(pm25Avg)

      // 计算舒适度指数
      const comfortIndex = this.calculateComfortIndex(tempAvg, humidityAvg, pm25Avg)

      this.analysisData[groupId] = {
        tempAvg: {
          label: '平均温度',
          value: `${tempAvg.toFixed(1)}°C`
        },
        tempMax: {
          label: '最高温度',
          value: `${tempMax.toFixed(1)}°C`
        },
        tempMin: {
          label: '最低温度',
          value: `${tempMin.toFixed(1)}°C`
        },
        tempTrend: {
          label: '温度趋势',
          value: tempTrend
        },
        humidityAvg: {
          label: '平均湿度',
          value: `${humidityAvg.toFixed(0)}%`
        },
        humidityMax: {
          label: '最高湿度',
          value: `${humidityMax.toFixed(0)}%`
        },
        humidityMin: {
          label: '最低湿度',
          value: `${humidityMin.toFixed(0)}%`
        },
        humidityTrend: {
          label: '湿度趋势',
          value: humidityTrend
        },
        pm25Avg: {
          label: '平均PM2.5值',
          value: `${pm25Avg.toFixed(1)}μg/m³`
        },
        pm25Max: {
          label: '最高PM2.5值',
          value: `${pm25Max.toFixed(1)}μg/m³`
        },
        pm25Min: {
          label: '最低PM2.5值',
          value: `${pm25Min.toFixed(1)}μg/m³`
        },
        airQuality: {
          label: '空气质量评级',
          value: airQualityStatus
        },
        comfort: {
          label: '综合舒适度',
          value: comfortIndex
        }
      }
    },
    // 计算空气质量状态文本（基于PM2.5值）
    getAirQualityStatus(pm25Value) {
      // 简化的PM2.5空气质量评级标准
      const pm25ValueInt = Math.floor(pm25Value)
      return this.pm25Grade[Math.min(29, Math.floor(pm25ValueInt / 10))] || '严重污染'
    },
    // 计算趋势
    calculateTrend(data) {
      if (data.length < 2) return '稳定'

      const first =
        data.slice(0, Math.floor(data.length / 2)).reduce((a, b) => a + b, 0) /
        Math.floor(data.length / 2)
      const last =
        data.slice(Math.floor(data.length / 2)).reduce((a, b) => a + b, 0) /
        Math.ceil(data.length / 2)

      const diff = last - first
      const absDiff = Math.abs(diff)

      if (absDiff < 0.5) return '稳定'
      return diff > 0 ? '上升' : '下降'
    },
    // 计算舒适度指数（考虑温度、湿度和PM2.5）
    calculateComfortIndex(temp, humidity, pm25) {
      // 温度舒适度（22°C左右最舒适）
      const tempDiff = Math.abs(temp - 22)
      const tempScore = 100 - tempDiff * 3

      // 湿度舒适度（50%左右最舒适）
      const humidityDiff = Math.abs(humidity - 50)
      const humidityScore = 100 - humidityDiff * 1.5

      // PM2.5舒适度（越低越好）
      const pm25Score =
        pm25 <= 35
          ? 100
          : pm25 <= 75
          ? 100 - (pm25 - 35) * 1
          : pm25 <= 115
          ? 60 - (pm25 - 75) * 0.8
          : pm25 <= 150
          ? 30 - (pm25 - 115) * 0.5
          : 10 - (pm25 - 150) * 0.2

      // 综合评分（加权平均）
      const combinedScore = (tempScore * 0.4 + humidityScore * 0.3 + pm25Score * 0.3) / 1
      const normalizedScore = Math.max(0, Math.min(100, combinedScore))

      if (normalizedScore >= 85) return '舒适'
      if (normalizedScore >= 70) return '较舒适'
      if (normalizedScore >= 55) return '一般'
      if (normalizedScore >= 40) return '较不舒适'
      return '不舒适'
    }
  }
}
</script>

<style scoped>
.environment-monitor {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.control-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 15px;
}

.time-filter,
.group-select {
  display: flex;
  align-items: center;
}

.time-filter span,
.group-select span {
  margin-right: 10px;
  color: #606266;
}

.refresh-btn {
  margin-left: auto;
}

.group-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease;
}

.group-card:hover {
  transform: translateY(-5px);
}

.group-header {
  background: #f5f7fa;
  padding: 15px 20px;
  border-bottom: 1px solid #e4e7ed;
}

.group-header h2 {
  margin: 0;
  font-size: 18px;
  color: #303133;
  font-weight: 600;
}

.group-desc {
  margin-top: 5px;
  font-size: 14px;
  color: #606266;
}

.chart-container {
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.chart-header h3 {
  font-size: 16px;
  color: #303133;
  font-weight: 500;
}

.chart-wrapper {
  position: relative;
}

canvas {
  max-width: 100%;
  height: auto;
}

.empty-chart {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #909399;
  font-size: 14px;
}

.analysis-container {
  padding: 20px;
}

.analysis-container h3 {
  font-size: 16px;
  color: #303133;
  font-weight: 500;
  margin-bottom: 15px;
}

.analysis-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 15px;
}

.temperature-row {
  border-left: 3px solid rgba(64, 158, 255, 0.8);
  padding-left: 10px;
}

.humidity-row {
  border-left: 3px solid rgba(103, 194, 58, 0.8);
  padding-left: 10px;
}

.pm25-row {
  border-left: 3px solid rgba(230, 162, 60, 0.8);
  padding-left: 10px;
}

.comfort-row {
  border-left: 3px solid rgba(158, 102, 255, 0.8);
  padding-left: 10px;
}

.analysis-item {
  padding: 10px;
  background: #f5f7fa;
  border-radius: 6px;
}

.analysis-label {
  font-size: 13px;
  color: #606266;
  margin-bottom: 5px;
}

.analysis-value {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
}
</style>